<template>
    <div class="chart-box">
        <!-- <el-button type="text" class="change-type" @click="changeType">{{ `${type != 'line' ? '折线图查看' : '柱状图查看'}` }}</el-button> -->
        <div class="chart" ref="chartPie"></div>
    </div>
</template>
<script>
// import { formatTime } from "@/utils/tool";

export default {
    data() {
        return {
            chartData: [],
            chartObj: null,
            type: 'pie',
            timer: null
        };
    },
    props: ['option_cfg', 'metricData'],
    methods: {
        resize: function () {
            this.chartObj.resize();
        },
        changeType() {
            if (this.type == 'pie') {
                this.type = 'line'
            } else {
                this.type = 'pie'
            }
            this.setOption()
        },
        setOption() {
            let text = this.chartData.title.text
            let option = {
                title: {
                    text: text,
                    fontSize: '18px',
                    fontWeight: 600,
                    color: this.$AxisColor,
                    left: 'center'
                },

                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: this.chartData.data
                    }],
            }
            this.chartObj.clear();
            this.chartObj.setOption(option);
        },
        async refeshData() {
            let ret = await this.metricData(this.option_cfg.id, this.option_cfg.key, this.option_cfg.type)
            this.chartData = JSON.parse(ret.data[0].value)
            let option = this.chartObj.getOption()
            option.series[0].data = this.chartData.data
            this.chartObj.hideLoading()
            this.chartObj.setOption(option)
        }
    },
    mounted() {
        this.chartData = JSON.parse(this.option_cfg.value)
        this.chartObj = this.$echarts.init(this.$refs.chartPie);
        this.setOption();
        this.timer = setInterval(() => {
            console.log("刷新" + new Date());
            this.refeshData()
        }, 5000);
        window.addEventListener("resize", () => {
            this.resize();
        });
    },
    beforeDestroy() {
        //清除定时器
        clearInterval(this.timer);
        this.timer = null;
        this.chartObj.dispose();
        this.chartObj.clear();
        window.removeEventListener("resize", this.resize);
    },
};
</script>
<style scoped lang="less">
.chart-box {
    height: 100%;
    width: 100%;
    padding: 10px 0 0 20px;
    box-sizing: border-box;
    position: relative;

    .change-type {
        position: absolute;
        right: 20px;
        top: 20px;
        z-index: 6;
    }

    .chart {
        height: 100%;
        width: 100%;
    }
}
</style>